<template>
  <div>
    <el-tabs v-model="searchForm.tab" class="demo-tabs" @tab-change="getData">
      <el-tab-pane
        :label="item.name"
        :name="item.value"
        v-for="item in tabList"
      />
    </el-tabs>
    <el-card>
      <Search @search="getData" @reset="resetSearchForm" style="width: 100%">
        <SearchItem title="订单编号">
          <el-input
            v-model="searchForm.no"
            placeholder="请输入订单编号"
            @keyup.enter="getData"
          ></el-input>
        </SearchItem>
        <template v-slot:show>
          <SearchItem title="收货人">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入收货人"
              @keyup.enter="getData"
            ></el-input>
          </SearchItem>
          <SearchItem title="收货人手机号">
            <el-input
              v-model="searchForm.phone"
              placeholder="请输入收货人手机号"
              @keyup.enter="getData"
            ></el-input>
          </SearchItem>
        </template>
      </Search>

      <div class="noptice-header flex">
        <el-button
          type="danger"
          size="small"
          @click="delAllClick"
          :disabled="ids.length === 0"
          >批量删除</el-button
        >
        <div style="margin-left: auto">
          <el-button type="primary" size="small" @click="getData">
            <el-icon>
              <Refresh />
            </el-icon>
          </el-button>
        </div>
      </div>

      <el-table
        :data="tableList"
        @selection-change="handleDeleteAll"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品" prop="" width="360">
          <template #default="{ row }">
            <div>
              <div class="flex text-sm">
                <div class="flex-1">
                  <p>订单号：</p>
                  <small>{{ row.no }}</small>
                </div>
                <div>
                  <p>下单时间：</p>
                  <small>{{ row.create_time }}</small>
                </div>
              </div>
              <div
                class="flex py-2"
                v-for="(item, index) in row.order_items"
                :key="index"
              >
                <el-image
                  :src="item.goods_item ? item.goods_item.cover : ''"
                  fit="cover"
                  :lazy="true"
                  style="width: 30px; height: 30px"
                ></el-image>
                <p class="text-blue-500 ml-2">
                  {{ item.goods_item ? item.goods_item.title : "商品已被删除" }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="实际付款"
          width="120"
          prop="total_price"
          align="center"
        />
        <el-table-column align="center" label="买家" width="120">
          <template #default="{ row }">
            <p>{{ row.user.nickname || row.user.username }}</p>
            <small>(用户ID：{{ row.user.id }})</small>
          </template>
        </el-table-column>
        <el-table-column label="交易状态" width="300" align="center">
          <template #default="{ row }">
            <div>
              付款状态：
              <el-tag
                v-if="row.payment_method == 'wechat'"
                type="success"
                size="small"
                >微信支付</el-tag
              >
              <el-tag v-else-if="row.payment_method == 'alipay'" size="small"
                >支付宝支付</el-tag
              >
              <el-tag v-else type="info" size="small">未支付</el-tag>
            </div>
            <div>
              发货状态：
              <el-tag :type="row.ship_data ? 'success' : 'info'" size="small">{{
                row.ship_data ? "已发货" : "未发货"
              }}</el-tag>
            </div>
            <div>
              收货状态：
              <el-tag
                :type="row.ship_status == 'received' ? 'success' : 'info'"
                size="small"
                >{{
                  row.ship_status == "received" ? "已收货" : "未收货"
                }}</el-tag
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              text
              size="small"
              @click="setGoodsContent(scope.row)"
              type="primary"
              >订单详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>
    <orderDetails ref="detailsRef" :info="info"> </orderDetails>
  </div>
</template>

<script setup>
import Search from "@/components/Search/Search.vue";
import SearchItem from "@/components/Search/SearchItem.vue";
import { getOrdersList, delOrders } from "@/api/order.js";
import { ref } from "vue";
import { useInitTable } from "@/composables/useCommon.js";
import orderDetails from "./orderDetails.vue";

const {
  tableList,
  page,
  total,
  limit,
  searchForm,
  getData,
  resetSearchForm,
  changePage,
  ids,
  handleDeleteAll,
  delAllClick,
} = useInitTable({
  searchForm: {
    no: "",
    tab: "all",
    name: "",
    phone: "",
  },
  getList: getOrdersList,
  del: delOrders,
  onGetListSuccess: (res) => {
    total.value = res.data.totalCount;
    tableList.value = res.data.list;
  },
});

const tabList = ref([
  {
    name: "全部",
    value: "all",
  },
  {
    name: "待付款",
    value: "nopay",
  },
  {
    name: "待发货",
    value: "noship",
  },
  {
    name: "已发货",
    value: "shiped",
  },
  {
    name: "已收货",
    value: "received",
  },
  {
    name: "已完成",
    value: "finish",
  },
  {
    name: "已关闭",
    value: "closed",
  },
  {
    name: "退款中",
    value: "refunding",
  },
]);

// 设置商品详情
let detailsRef = ref();
let info = ref(null);
const setGoodsContent = (row) => {
  row.order_items = row.order_items.map((o) => {
    if (o.skus_type == 1 && o.goods_skus) {
      let s = [];
      for (const k in o.goods_skus.skus) {
        s.push(o.goods_skus.skus[k].value);
      }
      o.sku = s.join(",");
    }
    return o;
  });
  info.value = row;
  detailsRef.value.open();
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
